<template>
    <div>
        <div class="box">
            <router-link to="/personal"> X </router-link>
            <h1>微钓</h1>
            <p>献给热爱户外垂钓的你</p>

            <van-form validate-first @failed="onFailed" @submit="onSubmit">
                <!-- 通过 username 进行正则校验 -->
                <van-field v-model="users.username" name="username" placeholder="请输入账号" label="用户名"
                    :rules="[{ message: '请输入正确用户名' }]" />
                <!-- 通过 password 进行函数校验 -->
                <van-field v-model="users.password" name="password" placeholder="请输入密码" label="密码"
                    :rules="[{ password, message: '请输入正确密码' }]" />
                <!-- 通过 validator 进行异步函数校验 -->
                <van-field v-model="password1" name="asyncPassword" placeholder="密码确认" label="确认密码"
                    :rules="[{ password: asyncPassword, message: '密码不一致' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">立即登录</van-button>
                </div>

                <van-checkbox v-model="checked" shape="square">请阅读并同意微钓鱼 <b>用户服务协议</b></van-checkbox>

            </van-form>
        </div>
    </div>

</template>

<script>
import { Toast } from 'vant';

export default {
    data() {
        return {
            users: {
                username: '',
                password: '',
            },
            password1: '',
            pattern: /\d{6}/,
            checked: false,
        };
    },

    computed() {
    },
    methods: {
        // 校验函数返回 true 表示校验通过，false 表示不通过
        password(val) {
            return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
        },
        // 异步校验函数返回 Promise
        asyncPassword(val) {
            return new Promise((resolve) => {
                Toast.loading('验证中...');

                setTimeout(() => {
                    Toast.clear();
                    resolve(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/);
                }, 1000);
            });
        },
        onFailed(errorInfo) {
            Toast.fail('登录失败');
            console.log('failed', errorInfo);
        },
        onSubmit() {
            this.$store.dispatch("user/login", this.ruleForm);
        },
    },
};
</script>

<style scoped lang="scss">
.box {
    height: 100vh;
    background: #000;
    overflow: hidden;

    a {
        float: right;
        color: #fff;
        font-size: 20px;
        margin: 5px;
        cursor: pointer;
    }

    h1,
    p {
        text-align: center;
        color: #fff;
    }

    h1 {
        font-size: 80px;
        font-family: '宋体';
        margin-top: 122px;
    }

    .van-form {
        color: #fff;

        .van-cell {
            margin: 10px;
        }

        .van-checkbox {
            margin-left: 20%;
            margin-top: 100px;
        }

        .van-checkbox_label {
            color: #fff;
        }
    }
}
</style>